<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于我们---页面管理</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="layui-layout-body">
	<h3>公司介绍</h3>
	<table id="demo" lay-filter="test" action="" method="post">
	</table>

	<script type="text/html" id="toolbarDemo2">
			<div class="layui-btn-container">

		    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
		  </div>
		</script>
	<!-- 修改公司介绍表 -->
	<div id="updateDiv" style="display: none;">
		<form class="layui-form" lay-filter="updateForm"
			action="AboutServletadmin?method=intsertgongsi" method="post">
			<div class="layui-form-item">
				<label class="layui-form-label">字段1</label>
				<div class="layui-input-inline">
					<input type="text" name="content" id="content" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">字段2</label>
				<div class="layui-input-inline">
					<input type="text" name="content2" id="content2" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" name="Url" class="layui-btn" id="tpscg">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="showImgg" src=" " width="100" /> <input type="text"
						name="gourl" id="urlg" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input Layui-disabled">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">字段3</label>
				<div class="layui-input-inline">
					<input type="text" name="content3" id="content3" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" name="urld" class="layui-btn" id="tpscgs">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>


					<img id="showImggs" src=" " width="100" /> <input type="text"
						name="gourl2" id="urlgs" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input Layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtn">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script>
		layui.use('upload', function() {
			var upload = layui.upload;
			var $ = layui.$
			layui.use('table', function() {
				var table = layui.table;
				var $ = layui.$;
				var upload = layui.upload;
				var form = layui.form;

				//第一个实例
				table.render({
					elem : '#demo',
					url : 'AboutServletadmin?method=dogongsi' //数据接口
					,
					id : "sheji",
					page : true //开启分页
					,
					method : "post",
					cols : [ [ //表头
					{
						field : 'id',
						title : 'id',
						width : 80
					}, {
						field : 'content',
						title : '字段1',
						width : 80
					}, {
						field : 'content2',
						title : '字段2',
						width : 150
					}, {
						field : 'gourl',
						title : '图片1',
						width : 150,
						templet : function(a) {
							return '<img src="../'+a.gourl+'"/>'
						}
					}, {
						field : 'content3',
						title : '字段3',
						width : 150
					}, {
						field : 'gourl2',
						title : '图片2',
						width : 150,
						templet : function(q) {
							return '<img src="../'+q.gourl2+'"/>'
						}
					}, {
						title : '操作',
						toolbar : '#toolbarDemo2'
					}

					] ]
				});

				//监听行内公司介绍表
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					switch (obj.event) {
					case 'update':
						console.log(data)
						form.val("updateform", data), layer.open({
							type : 1,
							area : [ '500px', '600px' ],
							content : $('#updateDiv')
						});
						form.val("updateForm", data);
						$("#showImgg").attr("src", "../" + data.gourl)
						$("#showImggs").attr("src", "../" + data.gourl2)
						break;
					}
					;
				});

				form.on('submit(subBtn)', function(data) {
					$.post("AboutServletadmin?method=intsertgongsi",
							data.field, function(res) {
								console.log(res);
								if (res.code == 0) {
									layer.msg(res.msg, {
										time : 1000
									}, function() {
										form.val("updateForm", data);
										$("#showImgg").attr("src",
												"../" + data.gourl)
										$("#showImggs").attr("src",
												"../" + data.gourl2)
										layer.closeAll();
										table.reload("sheji", {});
									})
								}
							}, "json")
					return false;
				});
				var uploadInst = upload
						.render({
							elem : '#tpscg',//绑定元素
							url : 'AboutServletadmin?method=uploadImg', //上传接口
							done : function(res) {
								//上传完毕回调
								console.log(res);
								if (res.code == 0) {
									$("#showImgg").attr("src",
											"../images/" + res.data);
									$("#urlg").val("images/" + res.data);
								}

							},
							error : function() {
								//请求异常回调
							}
						});
				var uploadInst = upload.render({
					elem : '#tpscgs',//绑定元素
					url : 'AboutServletadmin?method=uploadImg', //上传接口
					done : function(res) {
						//上传完毕回调
						console.log(res);
						if (res.code == 0) {
							$("#showImggs")
									.attr("src", "../images/" + res.data);
							$("#urlgs").val("images/" + res.data);
						}

					},
					error : function() {
						//请求异常回调
					}
				});

			});
		});
	</script>
</body>
</html>